<script setup lang="ts">
import UvVtabs from '@/uv-ui/components/uv-vtabs/components/uv-vtabs/uv-vtabs.vue'
import UvVtabsItem from '@/uv-ui/components/uv-vtabs/components/uv-vtabs-item/uv-vtabs-item.vue'

function handleClickLeft() {
  uni.navigateBack()
}
const list = ref([] as any)
const { ctx } = getCurrentInstance()
const dishBarHeight = ref(0)
const contentWidth = ref(0)
onReady(() => {
  // 模拟接口请求数据
  uni.showLoading({
    title: '加载中',
  })
  ctx.$uv.getRect('.dish-bar').then((res) => {
    dishBarHeight.value = res.height
  })
  ctx.$uv.getRect('.dish-content').then((res) => {
    console.log(res)
    contentWidth.value = res.width
  })
  setTimeout(() => {
    getList()
    uni.hideLoading()
  }, 500)
})

function getList() {
  list.value = [
    {
      name: '做法1',
      level: 1,
      childrens: [
        {
          name: '清蒸',
        },
        {
          name: '红烧',
        },
      ],
    },
  ]
}
</script>

<template>
  <view class="h-full flex flex-col overflow-hidden">
    <wd-navbar title="选择做法" left-text="返回" left-arrow @click-left="handleClickLeft" />
    <view class="dish-bar flex-1 overflow-hidden">
      <uv-vtabs :chain="true" :list="list" :height="dishBarHeight">
        <view class="dish-content box-border">
          <template v-for="(item, index) in list" :key="index">
            <uv-vtabs-item :index="index">
              <wd-sticky>
                <view
                  class="box-border h-7 flex justify-between px-2 leading-7"
                  :style="{
                    width: `${contentWidth}px`,
                  }"
                >
                  <wd-text text="做法1:共2个" size="12px" />
                  <wd-text text="全选本组" size="12px" color="red" />
                </view>
              </wd-sticky>
              <template v-for="ic in item.childrens" :key="ic.name">
                <view
                  class="flex items-center justify-between border-b-1 border-border border-b-solid p-4"
                >
                  <view>
                    <wd-text :text="ic.name" size="14px" color="#333" />
                  </view>
                  <wd-checkbox shape="square" />
                </view>
              </template>
            </uv-vtabs-item>
          </template>
          <wd-button type="text" class="ml-2 mt-4">
            <view>
              <view class="i-carbon-add-filled text-lg" />
              <text class="text-sm text-main">新建做法</text>
            </view>
          </wd-button>
        </view>
      </uv-vtabs>
    </view>
    <view
      class="flex items-center justify-between border-t-1 border-border border-t-solid bg-white p-4"
    >
      <wd-checkbox shape="square">全选所有分组</wd-checkbox>
      <view class="flex items-center">
        <view class="mr-6">
          <text>已选</text>
          <text class="mx-1 text-primary">0</text>
          <text>个</text>
        </view>
        <wd-button :round="false" class="w-[110px]">确定</wd-button>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss"></style>
